<template>
  <div class="header">
    <div title="新建笔记" class="add" @click="changeShowTip(true)"><i class="el-icon-plus"></i></div>
  </div>
</template>

<script>

import { mapMutations } from 'vuex'

export default {
  name: 'header',
  methods: {
    ...mapMutations(['changeShowTip'])
  }
}
</script>

<style lang="less" scoped>
.header {
  height: 40px;
}

.add {
  width: 40px;
  height: 40px;
  line-height: 40px;
  font-weight: lighter;
  color: rgb(113, 113, 113);
  // 禁止文字被选择
  user-select: none;
}

.add:hover {
  background-color: rgb(42, 42, 42);
}
</style>
